<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
      *{margin:0;padding:0;}
      #tem{
        display:none;
      }
      .edit span:hover{color:#f00;}
      .edit span{
        cursor:pointer;
      }
      .mask{
        position:absolute;
        width:100%;
		height:100%;
        background-color:rgba(0,0,0,0.3);
        top:0;
        left:0;
		display:none;
      }
      .popup{
        background-color:#fff;
        padding:10px;
        display:none;
        position:absolute;
        width:500px;
        height:200px;
        z-index: 2;
        left:50%;
        top:50%;
		transform:translate(-50%,-50%);
      }
      .killMargin{
        overflow:hidden;
      }
	  .table th,.table td{
		  height:42px;
		  line-height:42px;
	  }
    </style>
	<script src="jquery.min.js"></script>
	<script>
		$(function(){
			var mask = $(".mask");
			var popup = $(".popup")
			
			$("#confirm").click(function(){
				_this.closest("tr").remove()
				mask.fadeOut();
				popup.fadeOut();
			})
			$("#cancel").click(function(){
				mask.fadeOut();
				popup.fadeOut();
			})
			
			// 编辑功能 
			$(".table td").not(".edit").click(function(){
				var td = this;
				var input = $("<input>").val(this.innerHTML);
				this.innerHTML = "";
				input.appendTo(this)
				input.focus()
				
				input.blur(function(){
					td.innerHTML = input.val()
				})
			})
			// 删除一条数据
			$(".delete").click(function(){
				mask.fadeIn();
				popup.fadeIn();
				_this = $(this)
			})
			$(".insertData").click(function(){
				var newItem = $("#tem").clone(true).attr("id","");
				$(this).closest("tr").after(newItem)
			})
			
		})
	</script>
</head>
<body>
	<h3>XI'AN XIANYANG INT'L AIRPORT (陕西 西安 CN) ZLXY / XIY 离港 </h3>
	<hr>
	<table class="table">
		<thead>
		  <tr>
			<th width="10%">标识符</th>
			<th width="10%">机型</th>
			<th width="20%">目的地</th>
			<th width="20%">出发</th>
			<th width="20%">到达</th>
			<th width="10%">操作</th>
		  </tr>
		</thead>
		<tbody>
		  <tr>
			<td>AAR348</td>
				  <td>A321</td>
				  <td>Incheon Int'l (ICN)</td>
				  <td>15:10 CST</td>
				  <td>18:14 KST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
		  </tr>
		  <tr>
				  <td>FZA6695</td>
				  <td>B738</td>
				  <td>Quanzhou Jinjiang (JJN)</td>
				  <td>15:05 CST</td>
				  <td>17:45 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CHH7509</td>
				  <td>B738</td>
				  <td>Fuzhou Changle Int'l (FOC)</td>
				  <td>  15:00 CST</td>
				  <td>17:28 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>OKA2885</td>
				  <td>B738</td>
				  <td>Urumqi Diwopu Int'l (URC)</td>
				  <td>  14:54 CST</td>
				  <td>18:29 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr id="tem">
				  <td></td>
				  <td></td>
				  <td></td>
				  <td></td>
				  <td></td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
		</tbody>
		</table>
	</div>
	
	<div class="popup">
		<button class="btn btn-primary" id="confirm">确定</button>
		<button id="cancel" class="btn">取消</button>
	</div>
	
	<div class="mask"></div>
</body>
</html>